<template>
  <div>
    <div class="panel">
      <div class="panel-header">商户主体信息</div>
      <i-form
        class="import-form"
        ref="contractForm"
        :default-span="12"
        :items="contractFormItems"
        :model="contractForm"
        :rules="contractRules"
        :inline="true"
        :label-width="200"
      >
        <template slot="code">
          <el-form-item label="合同编号" prop="code">
            <div class="contract-info__code">
              <el-input v-model="contractForm.code" />
              <el-button class="table-button-green" @click="handleGenerateCode"
                >自动生成</el-button
              >
            </div>
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">微信(普通商户) 签约信息</div>
      <i-form
        class="import-form"
        ref="signForm"
        :default-span="12"
        :items="signFormItems"
        :model="signForm"
        :rules="signRules"
        :inline="true"
        :label-width="200"
      >
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">合同照片</div>
      <i-form
        ref="uploadForm"
        class="import-form"
        :default-span="12"
        :items="uploadFormItems"
        :model="uploadForm"
        :rules="uploadRules"
        :inline="true"
        :label-width="200"
      >
        <template slot="pic1">
          <el-form-item label="合同照片:" prop="pic1" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic1"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
      </i-form>
    </div>
  </div>
</template>
<script>
import formValidate from '@/utils/validate'
import HycFormUpload from '@/components/hycFormUpload'
export default {
  name: 'UserUnionpayContractInfo',
  components: { HycFormUpload },
  data() {
    return {
      stationImgData: { fileType: 'IMAGE' },
      contractFormItems: [
        {
          slot: 'code',
        },
        {
          label: '签购单名称',
          value: 'sign_name',
          type: 'text',
          required: true,
          clearable: true,
          maxlength: 100,
          'show-word-limit': true,
        },
        {
          label: '合同签署日期',
          type: 'date',
          value: 'sign_date',
          required: true,
          clearable: true,
        },
        {
          label: '合同生效日期',
          type: 'date',
          value: 'sdate',
          required: true,
          clearable: true,
        },
        {
          label: '合同过期日期',
          type: 'date',
          value: 'edate',
          required: true,
          clearable: true,
        },
        {
          label: '是否自动续签',
          type: 'radio',
          required: true,
          value: 'auto_sign',
          options: [
            {
              label: '1',
              text: '是',
            },
            {
              label: '0',
              text: '否',
            },
          ],
        },
      ],
      contractForm: {
        code: '',
      },
      contractRules: {
        code: [{ required: true, message: '请输入合同编号或自动生成' }],
      },
      signFormItems: [
        {
          label: '联系人',
          value: 'contact',
          type: 'text',
          required: true,
          clearable: true,
          maxlength: 25,
          'show-word-limit': true,
        },
        {
          label: '联系人手机',
          value: 'contact_tel',
          type: 'text',
          required: true,
          clearable: true,
        },
        {
          label: '客服电话',
          value: 'service_phone',
          type: 'text',
          required: true,
          clearable: true,
        },
      ],
      signForm: {},
      signRules: {
        contact_tel: [{ validator: formValidate('validateMobile') }],
        service_phone: [{ validator: formValidate('validateServiceMobile') }],
      },
      uploadFormItems: [
        {
          slot: 'pic1',
        },
      ],
      uploadForm: {},
      uploadRules: {},
    }
  },
  methods: {
    handleGenerateCode() {
      this.contractForm.code =
        parseInt(Math.random() * 1000000000) +
        '-' +
        parseInt(Math.random() * 1000000000) +
        '-' +
        new Date().getTime()
    },
  },
}
</script>
<style lang="scss" scoped>
.import-form {
  padding-right: 200px;
}
</style>
<style lang="scss">
.contract-info__code {
  display: flex;
  align-items: center;

  .el-button {
    height: 40px;
    margin-left: 10px;
  }
}
</style>
